<template>
  <LsdDialog :dialogConfig="dialogConfig" @handleBtn="handleBtn" @close="handleClose">
    <LsdDialogTitle slot="dialog" :titleConfig="titleConfig" :activeNames="activeNames">
      <DialogForm ref="formComponent" slot="slot1" :formConfig="formConfig" />
      <DialogForm ref="formComponent1" slot="slot1" :formConfig="formConfig1" />
      <div slot="slot2">
        <LsdTable slot="cxyq" :paginationAtrrs="paginationAtrrs" :compRef="tableList.compRef" ref="gjxm"
          :columns="tableList.columns" :tableData="tableList.tableData" :tableAttr="tableList.tableAttr"
          :isSequenceFlag="tableList.isSequenceFlag" :formLabel="tableList.formLabel"
          :autoHeight="tableList.autoHeight" />
      </div>
      <div slot="slot3">
        <DialogForm ref="formComponent2" :formConfig="formConfig2" />
      </div>
      <div slot="slot4">
        <DialogForm ref="formComponent3" :formConfig="formConfig3" />
      </div>
      <div slot="slot5">
        <DialogForm ref="formComponent4" :formConfig="formConfig4" />
      </div>
    </LsdDialogTitle>
  </LsdDialog>
</template>

<script>
import {
  getinfo,
  // xymldFeedbackapprove,
  getjudgelist,
  getOrgApi,
  getMemberApi
} from "@/api/EmergencyDisposal/xymld";
import { showTime } from "@/lib";
import { handleFlow } from "@/utils/flowMixin.js";
export default {
  name: "EmergencyResponseApproval",
  components: {},
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    id: {
      type: [String, Number],
      default: function () {
        return "";
      }
    }
  },
  data() {
    return {
      // 弹窗表单信息
      formConfig4: {
        formData: [
          {
            type: "input",
            label: "审批意见",
            prop: "approvalOpinion",
            class: "sjgy",
            lableWidth: "146px"
          },
          {
            type: "input",
            label: "审批人",
            prop: "approvalUser",
            // class: "third",
            isDisabled: true,
            lableWidth: "146px"
          },
          {
            type: "input",
            label: "单位及部门",
            prop: "approvalDept",
            // class: "third",
            isDisabled: true,
            lableWidth: "120px"
          },
          {
            type: "input",
            label: "审批时间",
            prop: "approvalTime",
            class: "third",
            isDisabled: true,
            lableWidth: "120px"
          }
        ]
      },
      formConfig3: {
        formData: [
          {
            type: "input",
            label: "填报人",
            prop: "creator",
            // class: "third",
            lableWidth: "146px",
            isDisabled: true
          },
          {
            type: "input",
            label: "单位及部门",
            prop: "createDeptName",
            // class: "third",
            lableWidth: "120px",
            isDisabled: true
          },
          {
            type: "input",
            label: "填报时间",
            prop: "createTime",
            class: "third",
            lableWidth: "120px",
            isDisabled: true
          }
        ]
      },
      // 弹窗表单信息
      formConfig2: {
        formData: [
          {
            type: "select",
            label: "主送单位",
            prop: "mainUnitId",
            dic: "mainUnitId",
            class: "sjgy",
            lableWidth: "146px",
            isShow: true,
            option: [
            ],
            isDisabled: true,
            name: "mainUnitName"
          },
          {
            type: "select",
            label: "响应部门",
            prop: "responseDeptId",
            dic: "dic_xybm",
            class: "sjgy",
            lableWidth: "146px",
            isShow: true,
            multiple: true,
            option: [
            ],
            isDisabled: true,
            name: "responseDeptName"
          },
          {
            type: "select",
            label: "联系人",
            prop: "linkmanId",
            dic: "dic_lxr",
            class: "sjgy",
            lableWidth: "146px",
            isShow: true,
            multiple: true,
            option: [
            ],
            isDisabled: true,
            name: "linkman"
          },
          {
            type: "select",
            label: "抄报",
            prop: "newspaperId",
            dic: "dic_cb",
            class: "half",
            lableWidth: "146px",
            isShow: true,
            multiple: true,
            option: [
            ],
            isDisabled: true,
            name: "outTheNewspaper"
          },
          {
            type: "select",
            label: "抄送",
            prop: "sendDuplicateId",
            dic: "dic_cs",
            class: "half",
            lableWidth: "146px",
            isShow: true,
            multiple: true,
            option: [
            ],
            isDisabled: true,
            name: "sendDuplicate"
          }
        ],
        rules: {
        }
      },
      tableList: {
        autoHeight: true,
        isSelectFlag: true,
        compRef: "cxyq",
        isSequenceFlag: true,
        isShowPage: true,
        resetFlag: true,
        loading: false,
        title: "响应命令单列表",
        actions: [],
        tableData: [
          {
            measureRequire: "",
            dutyDeptId: ""
          }
        ],
        columns: [
          {
            prop: "measureRequire",
            label: "有关措施要求",
            align: "left",
            "min-width": "200px"
          },
          {
            prop: "unitDeptName",
            label: "部门/单位",
            align: "center",
            "min-width": "70px"
          }
        ],
        formLabel: {
          label: "有关措施及要求：",
          prompt: false,
          width: "140px"
        },
        tableAttr: {
          stripe: false,
          border: true,
          fit: true,
          "show-header": true,
          "highlight-current-row": true,
          "cell-style": {
            "font-size": "16px"
          },
          "header-cell-style": {
            "text-align": "center",
            "background-color": "#B1C8F9",
            border: "1px solid #ccc",
            "font-size": "16px"
          }
        }
      },
      paginationAtrrs: {
        total: 0,
        layout: "total, sizes, prev, pager, next, jumper",
        "current-page": 1,
        "page-size": 10,
        "page-sizes": [10, 20, 30, 40, 50, 100]
      },
      // 弹窗表单信息
      formConfig1: {
        formData: [
          {
            type: "input",
            label: "响应命令单",
            prop: "responseName",
            class: "sjgy",
            isDisabled: true,
            lableWidth: "146px"
          },
          {
            type: "input",
            label: "事件类别",
            prop: "eventName",
            class: "half",
            isDisabled: true,
            lableWidth: "146px"
          },
          {
            type: "input",
            label: "影响范围",
            prop: "effectRange",
            class: "half",
            isDisabled: true,
            lableWidth: "146px"
          },
          {
            type: "input",
            label: "响应级别",
            prop: "responseLvName",
            class: "half",
            isDisabled: true,
            lableWidth: "146px"
          },
          {
            type: "input",
            label: "影响时间",
            prop: "effectTime",
            class: "half",
            isDisabled: true,
            lableWidth: "146px"
          },
          {
            type: "textarea",
            label: "事件概要",
            prop: "incidentOutline",
            class: "sjgy",
            lableWidth: "146px",
            isDisabled: true
          }
        ]
      },
      formConfig: {
        formData: [
          {
            type: "input",
            label: "响应研判单",
            prop: "judgeName",
            dic: "judgeId",
            class: "sjgy",
            lableWidth: "146px",
            isShow: true,
            option: [],
            isDisabled: true
          }
        ]
      },
      // 折叠面板信息
      titleConfig: [
        {
          title: "基本信息",
          name: "1",
          slot: "slot1"
        },
        {
          title: "措施要求",
          name: "2",
          slot: "slot2"
        },
        {
          title: "响应信息",
          name: "3",
          slot: "slot3"
        },
        {
          title: "填报信息",
          name: "4",
          slot: "slot4"
        },
        {
          title: "审批信息",
          name: "5",
          slot: "slot5"
        }
      ],
      // 弹窗信息
      dialogConfig: {
        title: "响应命令单",
        isShow: false, // 弹窗显示隐藏
        btnList: [
          {
            name: "同意",
            id: "agree", // 事件名
            type: "primary",
            size: "small"
          },
          {
            name: "驳回",
            id: "reject",
            size: "small"
          },
          {
            name: "取消",
            id: "cancel",
            size: "small"
          }
        ]
      },
      activeNames: ["1", "2", "3", "4", "5"],
      dwjbmlist: [
        {
          value: "1",
          label: "办公室"
        },
        {
          value: "2",
          label: "设备部"
        },
        {
          value: "3",
          label: "安监部"
        }
      ]
    };
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
          // this.getOrgAndMember();
          this.getInputVal();
          this.getinfo();
          this.dialogConfig.isShow = true;
        } else {
          if (this.dialogConfig.isShow) {
            this.$emit("list");
            this.dialogConfig.isShow = false;
          }
        }
      },
      deep: true,
      immediate: true
    }
  },
  computed: {
    getCreator() {
      const account = sessionStorage.getItem("account");
      const org = sessionStorage.getItem("org");
      const role = sessionStorage.getItem("role");
      const creator = {
        name: (account && JSON.parse(account).realName) || "",
        dept: (org && JSON.parse(org).orgName) || "",
        role: (role && JSON.parse(role)) || {},
        org: (org && JSON.parse(org)) || {},
        unitName: (org && JSON.parse(org).unitName) || ""
      };
      return creator;
    }
  },
  methods: {
    // 获取下拉框数据
    getInputVal() {
      this.formConfig.formData.forEach((item) => {
        if (item.dic) {
          getjudgelist().then(res => {
            const option = res.map((item) => {
              return {
                label: item.judgeName,
                value: item.id
              };
            });
            item.option = option;
          });
        }
      });
    },
    handleClose() {
      this.$emit("update:visible", false);
    },
    handleBtn(item) {
      this[item.id]();
    },
    async getinfo() {
      const res = await getinfo({ id: this.id });
      let { responseDeptId, linkmanId, newspaperId, sendDuplicateId } = res;
      responseDeptId = responseDeptId && responseDeptId.split(",");
      linkmanId = linkmanId && linkmanId.split(",");
      newspaperId = newspaperId && newspaperId.split(",");
      sendDuplicateId = sendDuplicateId && sendDuplicateId.split(",");

      this.$set(this.$refs.formComponent, "form", res);
      this.$set(this.$refs.formComponent1, "form", res);
      this.$set(this.$refs.formComponent2, "form", res);
      this.$set(this.$refs.formComponent2.form, "responseDeptId", responseDeptId);
      this.$set(this.$refs.formComponent2.form, "linkmanId", linkmanId);
      this.$set(this.$refs.formComponent2.form, "newspaperId", newspaperId);
      this.$set(this.$refs.formComponent2.form, "sendDuplicateId", sendDuplicateId);
      this.tableList.tableData = res.emergencyMeasureListVos;
      this.$set(this.$refs.formComponent3, "form", res);
      // this.$set(this.$refs.formComponent4, "form", res)

      // const { roleCode } = this.getCreator.role;
      // if (roleCode == "hb_spr") {
      this.$set(this.$refs.formComponent4.form, "approvalUser", this.getCreator.name);
      this.$set(this.$refs.formComponent4.form, "approvalDept", sessionStorage.getItem("dwbmName"));
      // this.$set(this.$refs.formComponent4.form, "approvalTime", new Date().toLocaleString().replace(/\//g, "-"))
      this.$set(this.$refs.formComponent4.form, "approvalTime", showTime(new Date()));
      // }
    },
    cancel() {
      this.$emit("update:visible", false);
    },
    async agree() {
      const parmas = {
        id: this.id,
        judgeId: this.$refs.formComponent.form.judgeId,
        emergencyEventIds: this.$refs.formComponent1.form.emergencyEventIds,
        emergencyId: this.$refs.formComponent1.form.emergencyEventIds,
        number: this.$refs.formComponent1.form.number,
        responseName: this.$refs.formComponent1.form.responseName,
        approvalOpinion: this.$refs.formComponent4.form.approvalOpinion || "同意",
        approvalUser: this.$refs.formComponent4.form.approvalUser,
        approvalDept: this.$refs.formComponent4.form.approvalDept,
        approvalTime: this.$refs.formComponent4.form.approvalTime,
        approvalDeptId: this.getCreator.org.orgCode,
        approveSign: "pass"
      };
      const flowData = {
        bizKey: this.id,
        flowKey: "emergency_response_002",
        taskId: "task2",
        callbackUrl: "/emergency/emergencyResponse/handleFlowNotice",
        idea: "1",
        isNext: false,
        flowType: "审核",
        ideaMsg: "同意"
      };
      const callBack = () => {
        this.$message({
          message: "审核成功",
          type: "success"
        });
        this.$emit("update:visible", false);
      };
      handleFlow(flowData, parmas, callBack);
      // await xymldFeedbackapprove(parmas);
      // this.$message({
      //   message: "审核成功",
      //   type: "success"
      // });
      // this.$emit("update:visible", false);
    },
    async reject() {
      const parmas = {
        id: this.id,
        judgeId: this.$refs.formComponent.form.judgeId,
        emergencyEventIds: this.$refs.formComponent1.form.emergencyEventIds,
        emergencyId: this.$refs.formComponent1.form.emergencyEventIds,
        number: this.$refs.formComponent1.form.number,
        responseName: this.$refs.formComponent1.form.responseName,
        approvalOpinion: this.$refs.formComponent4.form.approvalOpinion,
        approvalUser: this.$refs.formComponent4.form.approvalUser,
        approvalDept: this.$refs.formComponent4.form.approvalDept,
        approvalTime: this.$refs.formComponent4.form.approvalTime,
        approvalDeptId: this.getCreator.org.orgCode,
        approveSign: "reject"
      };
      const flowData = {
        bizKey: this.id,
        flowKey: "emergency_response_002",
        taskId: "task2",
        callbackUrl: "/emergency/emergencyResponse/handleFlowNotice",
        idea: "0",
        isNext: true,
        flowType: "审核",
        ideaMsg: "驳回"
      };
      const callBack = () => {
        this.$message({
          message: "驳回成功",
          type: "success"
        });
        this.$emit("update:visible", false);
      };
      handleFlow(flowData, parmas, callBack);
      // await xymldFeedbackapprove(parmas);
      // this.$message({
      //   message: "驳回成功",
      //   type: "success"
      // });
      // this.$emit("update:visible", false);
    },
    /* 获取组织机构 */
    async getOrgAndMember() {
      const dept = await getOrgApi({ orgType: "dept" });
      const unit = await getOrgApi({ orgType: "unit" });
      const cb = await getOrgApi({ orgType: "cb" });
      const cs = await getOrgApi({ orgType: "cs" });
      const member = await getMemberApi();

      /* 主送单位 */
      this.formConfig2.formData[0].option = unit.map(item => {
        return {
          label: item.orgName,
          value: item.orgCode
        };
      });
      this.formConfig2.formData[1].option = dept.map(item => {
        return {
          label: item.orgName,
          value: item.orgCode
        };
      });

      this.dwjbmlist = this.formConfig2.formData[1].option;

      this.formConfig2.formData[2].option = member.map(item => {
        return {
          label: `${item.unitDept}：${item.userName}`,
          value: item.id,
          ...item
        };
      });
      this.formConfig2.formData[3].option = cb.map(item => {
        return {
          label: item.orgName,
          value: item.orgCode
        };
      });
      this.formConfig2.formData[4].option = cs.map(item => {
        return {
          label: item.orgName,
          value: item.orgCode
        };
      });
    }
  }
};
</script>

<style scoped lang="less">
:deep(.el-input.is-disabled) {
  .el-input__inner {
    background-color: transparent;
    border-color: transparent;
    color: #333;
    text-align: center;

    &:hover {
      border-color: transparent;
    }
  }

  .el-input__suffix {
    display: none;
  }
}

.leftLine {
  width: 6px;
  height: 20px;
  background: #236dfe;
  border-radius: 4px;
  margin: auto 8px auto 0;
}

.title {
  border-bottom: 1px solid #ccc;
  padding-bottom: 8px;
}

.card {
  margin-bottom: 20px;

  p {
    font-size: 16px;
    margin-top: 12px;
  }
}

.content {
  width: 90%;
  position: relative;
  left: 5%;

  p {
    font-size: 16px;
    margin-top: 12px;
  }

  table tr td {
    border: 1px solid #000;
    font-size: 12px;
    text-align: center;
    padding: 10px;
  }
}
</style>
